<template>
  <div class="flex h-all pl10 pr10 fd-c pb50 auto custom-scrollbar w-all">
    <div v-for="item in yb" class="w-all mb40">
      <div @click="dbPlay(item)" class="flex hand ai-c">
        <span class="fs-25">{{item.title}}</span>
        <span class="iconfont icon-ting fc-aa fs-25"></span>
      </div>
      <div class="w-all fw mt15 flex">
        <div v-for="(v, i) in item.content" :class="{'playSection':v.name==info.playPinyin}" :key="i" @click="toPlay(v)" class="flex yinSha rel hand glass-card mr10 mb10 ra-10 flex ai-c jc-c fd-c w-250 h-160 fd-c ai-c ">
          <!-- <span class="fs-24">{{v.big}}</span> -->
          <span class="fs-85 fc-aa fb">{{v.title||v.name}}</span>
          <span class="fs-16">{{v.desc}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue';
import yy from '@lib/mixin';
import useStore from '../../store';
const st = useStore();
const info = reactive({
  playAudio: null,
  curr: null,
  isPlay: false,
  interval: null,
  isPause: false,
  playPinyin: "",
})
const yb = [
  {
    title: '23声个母',
    content: [
      { select: false, name: 'b', desc: '波', big: 'B' },
      { select: false, name: 'p', desc: '泼', big: 'P' },
      { select: false, name: 'm', desc: '么', big: 'M' },
      { select: false, name: 'f', desc: '佛', big: 'F' },
      { select: false, name: 'd', desc: '的', big: 'D' },
      { select: false, name: 't', desc: '特', big: 'T' },
      { select: false, name: 'n', desc: '呢', big: 'N' },
      { select: false, name: 'l', desc: '了', big: 'L' },
      { select: false, name: 'g', desc: '歌', big: 'G' },
      { select: false, name: 'k', desc: '科', big: 'K' },
      { select: false, name: 'h', desc: '喝', big: 'H' },
      { select: false, name: 'j', desc: '鸡', big: 'J' },
      { select: false, name: 'q', desc: '七', big: 'Q' },
      { select: false, name: 'x', desc: '西', big: 'X' },
      { select: false, name: 'zh', desc: '知', big: 'ZH' },
      { select: false, name: 'ch', desc: '吃', big: 'CH' },
      { select: false, name: 'sh', desc: '师', big: 'SH' },
      { select: false, name: 'r', desc: '日', big: 'R' },
      { select: false, name: 'z', desc: '资', big: 'Z' },
      { select: false, name: 'c', desc: '次', big: 'C' },
      { select: false, name: 's', desc: '司', big: 'S' },
      { select: false, name: 'y', desc: '衣', big: 'Y' },
      { select: false, name: 'w', desc: '乌', big: 'W' }
    ],
  },
  {
    title: '6个单韵母',
    content: [
      { select: false, title: 'ɑ', name: 'a', desc: '啊', big: 'A' },
      { select: false, name: 'o', desc: '哦', big: 'O' },
      { select: false, name: 'e', desc: '饿', big: 'E' },
      { select: false, name: 'i', desc: '衣', big: 'I' },
      { select: false, name: 'u', desc: '乌', big: 'U' },
      { select: false, name: 'ü',other:'v', desc: '鱼', big: 'Ü' },
    ]
  },
  {
    title: ' 8个复韵母',
    content: [
      { select: false, title: 'ɑi', name: 'ai', desc: '爱' },
      { select: false, name: 'ei', desc: '诶' },
      { select: false, name: 'ui', desc: '微' },
      { select: false, title: 'ɑo', name: 'ao', desc: '奥' },
      { select: false, name: 'ou', desc: '欧' },
      { select: false, name: 'iu', desc: '优' },
      { select: false, name: 'ie', desc: '耶' },
      { select: false, name: 'üe', desc: '月', other: 've' },
    ]
  },
  {
    title: '1个特殊韵母',
    content: [
      { select: false, name: 'er', desc: '耳' },
    ]
  },
  {
    title: '5个前鼻韵母',
    content: [
      { select: false, title: 'ɑn', name: 'an', desc: '安' },
      { select: false, name: 'en', desc: '恩' },
      { select: false, name: 'in', desc: '因' },
      { select: false, name: 'un', desc: '温' },
      { select: false, name: 'ün', desc: '晕',other: 'vn' },
    ]
  },
  {
    title: '4个后鼻韵母',
    content: [
      { select: false, title: 'ɑng', name: 'ang', desc: '昂' },
      { select: false, name: 'eng', desc: '嗯' },
      { select: false, name: 'ing', desc: '英' },
      { select: false, name: 'ong', desc: '翁' },
    ]
  },
  {
    title: ' 16个整体认读音节',
    content: [
      { yin: 1, select: false, name: 'zhi', desc: '知' },
      { yin: 1, select: false, name: 'chi', desc: '吃' },
      { yin: 1, select: false, name: 'shi', desc: '师' },
      { yin: 1, select: false, name: 'ri', desc: '日' },
      { yin: 1, select: false, name: 'zi', desc: '资' },
      { yin: 1, select: false, name: 'ci', desc: '次' },
      { yin: 1, select: false, name: 'si', desc: '司' },
      { yin: 1, select: false, name: 'yi', desc: '衣' },
      { yin: 1, select: false, name: 'wu', desc: '乌' },
      { yin: 1, select: false, name: 'yu', desc: '鱼' },
      { yin: 1, select: false, name: 'ye', desc: '耶' },
      { yin: 1, select: false, name: 'yue', desc: '月' },
      { yin: 1, select: false, title: 'yuɑn', name: 'yuan', desc: '元' },
      { yin: 1, select: false, name: 'yin', desc: '音' },
      { yin: 1, select: false, name: 'yun', desc: '晕' },
      { yin: 1, select: false, name: 'ying', desc: '英' }
    ]
  }
]

function toPlay(item) {
  const url = `http://du.hanyupinyin.cn/du/pinyin/${item.other || item.name}${item.yin || ''}.mp3`;
  if (!info.isPause) {
    info.playAudio = new Audio(url);
  }
  info.playAudio.play()
  info.isPlay = true;
  const currentTime = 0;
  info.isPause = false;
}

function dbPlay(item) {
  let i = 0;
  let playAudio = setInterval(() => {
    let v = item.content[i];
    if (!v) {
      clearInterval(playAudio);
      return;
    }
    let url = `http://du.hanyupinyin.cn/du/pinyin/${v.other || v.name}${v.yin || ''}.mp3`;
    if (info.playAudio) {
      info.playAudio.pause();
      info.playAudio = null;
    }

    info.playPinyin = v.name;
    info.playAudio = new Audio(url);
    info.playAudio.volume = 1;
    info.playAudio.play();
    i++;
  }, 2000);
}
</script>

<style lang='less'>
.playSection {
  box-shadow: 0 0 20px rgba(226, 128, 7, 0.8) !important;
  color: #e28007 !important;
}
.yinSha {
  &:hover {
    box-shadow: 0 0 20px rgba(226, 128, 7, 0.8);
  }
}
</style>